<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
	<ui:composition template="common.xhtml">
        <ui:define name="corpo">
        	<p:dialog id="modalDialog" 
				widgetVar="dlgEdicao" 
				modal="true" 
				dynamic="true"
				appendToBody="true"  
				showEffect="explode" 
				hideEffect="drop" 
				header="Edição de cliente" >
			 	<h:form id="formEdicao">
			 		<p:panel id="pnModalCliente" styleClass="panelSemBorda" > 
			 			<h:panelGrid columns="2" cellpadding="3" id="pnEdicao" border="0" >
			    			<ui:include src="/modal_cliente.xhtml" />
			    		</h:panelGrid>
			    	</p:panel>
			    </h:form>
			</p:dialog>
			<p:confirmDialog id="confirmDialog" message="Deseja realmente excluir o cliente" header="Excluir?" severity="alert" widgetVar="confirmation" appendToBody="true">
           		<h:form id="formExclusao">  
       				<p:commandButton id="confirm" value="Sim" actionListener="#{clienteManagedBean.excluirCliente()}" update=":form:dataTableResultado" oncomplete="confirmation.hide()"  />  
       				<p:commandButton id="decline" value="Não" onclick="confirmation.hide()" type="button" />
       			</h:form>   
   			</p:confirmDialog>
            <h:form id="form">
            	<p:messages id="messages" showDetail="true"  autoUpdate="true" closable="true" rendered="true"/>
		        <p:panel id="panelPesquisaCliente" header="Clientes" style="width: 700;">
		        	<h:panelGrid columns="2" cellpadding="2" id="userUpdateForm" border="0" >
		                <h:outputLabel for="inputCpf" value="CPF:"/>
		                <p:inputMask value="#{clienteManagedBean.cliente.cpf}" mask="999.999.999-99" id="inputCpf"/>
		                
		                <h:outputLabel for="inputNome" value="Nome:"/>
		                <h:inputText value="#{clienteManagedBean.cliente.nome}" maxlength="50" size="50" id="inputNome"></h:inputText>
		                
		                <p:commandButton id="pesquisarCliente" value="Pesquisar" actionListener="#{clienteManagedBean.pesquisaCliente(clienteManagedBean.cliente)}" update="dataTableResultado" icon="ui-icon-disk" />
          				<p:commandButton id="novoCliente"  value="Novo Cliente" actionListener="#{clienteManagedBean.novoCliente}"  update=":formEdicao:pnModalCliente" oncomplete="dlgEdicao.show();" />
		            </h:panelGrid>
	            </p:panel>
	        
			    <p:dataTable id="dataTableResultado" var="_cliente" value="#{clienteManagedBean.clientes}"
			                 paginator="true" rows="10"
			                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
			                 rowsPerPageTemplate="5,10,15"
			                 editable="true">
			        <f:facet name="header">
			            Resultado da pesquisa
			        </f:facet>
			
					<p:column style="width:4%" headerText="Ações" >
			            <p:commandButton id="btEditar" 
			            	icon="ui-icon-pencil" 
			            	oncomplete="dlgEdicao.show();" 
							update=":formEdicao:pnModalCliente"
			            	action="#{clienteManagedBean.selecionaCliente(_cliente)}" />  
			            <p:commandButton id="btExcluir" onclick="confirmation.show()" icon="ui-icon-close" >
		                	<f:setPropertyActionListener value="#{_cliente}" target="#{clienteManagedBean.clienteSelecionado}" />
		                </p:commandButton> 
			        </p:column> 
			        
			        <p:column headerText="CPF" styleClass="alignCenter">
			            <h:outputText value="#{_cliente.cpfFormatted}" id="outputCpf"/>
			        </p:column>
			
			        <p:column headerText="Nome">
			            <h:outputText id="outputNome" value="#{_cliente.nome}" />
			        </p:column>
			
			        <p:column headerText="Data Nascimento" styleClass="alignCenter">
			        	<h:outputText value="#{_cliente.dataDeNascimento}">
				       		<f:convertDateTime pattern="dd/MM/yyyy" />
				        </h:outputText>
			        </p:column>
			
			        <p:column headerText="Endereço">
			            <h:outputText id="outputEndereco" value="#{_cliente.enderecoCompleto}" />
			        </p:column>
			        
			        <p:column headerText="E-mail">
			            <h:outputText id="outputEmail" value="#{_cliente.email}" />
			        </p:column>
			    </p:dataTable>
			    
			</h:form>
        </ui:define>
    </ui:composition>
</html>